import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import CodeIcon from '@mui/icons-material/Code';
import FunctionsIcon from '@mui/icons-material/Functions';
import TipsAndUpdatesIcon from '@mui/icons-material/TipsAndUpdates';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import { 
    Accordion, 
    AccordionDetails, 
    AccordionSummary, 
    Box, 
    Link, 
    Typography,
    Paper,
    Chip,
    Stack,
    alpha
} from "@mui/material";
import { memo } from "react";

/**
 * Freemarker使用说明组件
 */
const UsageGuide = memo(() => (
    <Box>
        <Typography 
            variant="h5" 
            sx={{ 
                mb: 4, 
                fontWeight: 700,
                display: 'flex',
                alignItems: 'center',
                gap: 1
            }}
        >
            <HelpOutlineIcon color="primary" />
            使用说明
        </Typography>

        <Paper elevation={0} sx={{ p: 3, borderRadius: 3, border: '1px solid', borderColor: 'divider' }}>
            <Accordion defaultExpanded>
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />}
                    sx={{ 
                        bgcolor: alpha('#2e7d32', 0.05),
                        borderRadius: 2,
                        mb: 1,
                        '&:hover': { bgcolor: alpha('#2e7d32', 0.1) }
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1
                        }}
                    >
                        <CodeIcon fontSize="small" color="primary" />
                        基本语法
                    </Typography>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 2 }}>
                    <Typography variant="body2" paragraph color="text.secondary">
                        FreeMarker 是一个模板引擎，用于生成文本输出（如HTML网页、电子邮件、配置文件等）。
                    </Typography>
                    <Stack spacing={1}>
                        <Chip label="${...} - 插值：用于输出表达式的值" variant="outlined" size="small" />
                        <Chip label="#{...} - 数值插值：用于格式化数字" variant="outlined" size="small" />
                        <Chip label="<#directive>...</#directive> - FTL标签：用于控制逻辑" variant="outlined" size="small" />
                        <Chip label="<@macro>...</@macro> - 用户自定义指令" variant="outlined" size="small" />
                    </Stack>
                </AccordionDetails>
            </Accordion>

            <Accordion>
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />}
                    sx={{ 
                        bgcolor: alpha('#1976d2', 0.05),
                        borderRadius: 2,
                        mb: 1,
                        '&:hover': { bgcolor: alpha('#1976d2', 0.1) }
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1
                        }}
                    >
                        <FunctionsIcon fontSize="small" color="primary" />
                        常用指令
                    </Typography>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 2 }}>
                    <Stack spacing={1}>
                        <Chip label="<#if condition>...</#if> - 条件判断" variant="outlined" size="small" />
                        <Chip label="<#list sequence as item>...</#list> - 循环遍历" variant="outlined" size="small" />
                        <Chip label="<#assign name=value> - 变量赋值" variant="outlined" size="small" />
                        <Chip label="<#include path> - 包含其他模板" variant="outlined" size="small" />
                        <Chip label="<#macro name>...</#macro> - 定义宏" variant="outlined" size="small" />
                    </Stack>
                </AccordionDetails>
            </Accordion>

            <Accordion>
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />}
                    sx={{ 
                        bgcolor: alpha('#7b1fa2', 0.05),
                        borderRadius: 2,
                        mb: 1,
                        '&:hover': { bgcolor: alpha('#7b1fa2', 0.1) }
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1
                        }}
                    >
                        <FunctionsIcon fontSize="small" color="secondary" />
                        内置函数
                    </Typography>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 2 }}>
                    <Stack spacing={1} direction="row" flexWrap="wrap">
                        <Chip label="?string - 转字符串" variant="outlined" size="small" />
                        <Chip label="?upper_case - 转大写" variant="outlined" size="small" />
                        <Chip label="?lower_case - 转小写" variant="outlined" size="small" />
                        <Chip label="?length - 获取长度" variant="outlined" size="small" />
                        <Chip label="?trim - 去除空格" variant="outlined" size="small" />
                        <Chip label="?replace() - 替换字符串" variant="outlined" size="small" />
                        <Chip label="?split() - 分割字符串" variant="outlined" size="small" />
                        <Chip label="?join() - 连接元素" variant="outlined" size="small" />
                    </Stack>
                </AccordionDetails>
            </Accordion>

            <Accordion>
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />}
                    sx={{ 
                        bgcolor: alpha('#f57c00', 0.05),
                        borderRadius: 2,
                        mb: 1,
                        '&:hover': { bgcolor: alpha('#f57c00', 0.1) }
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1
                        }}
                    >
                        <TipsAndUpdatesIcon fontSize="small" sx={{ color: '#f57c00' }} />
                        使用技巧
                    </Typography>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 2 }}>
                    <Stack spacing={2}>
                        <Box sx={{ p: 2, bgcolor: alpha('#4caf50', 0.1), borderRadius: 2, borderLeft: '4px solid #4caf50' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>
                                💡 空值检查
                            </Typography>
                            <Typography variant="body2" color="text.secondary">
                                使用 <code>??</code> 或 <code>?exists</code> 检查变量是否存在，避免空指针异常
                            </Typography>
                        </Box>
                        <Box sx={{ p: 2, bgcolor: alpha('#2196f3', 0.1), borderRadius: 2, borderLeft: '4px solid #2196f3' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>
                                🔄 列表分隔符
                            </Typography>
                            <Typography variant="body2" color="text.secondary">
                                使用 <code>&lt;#sep&gt;, &lt;/#sep&gt;</code> 在列表项之间添加分隔符
                            </Typography>
                        </Box>
                        <Box sx={{ p: 2, bgcolor: alpha('#ff9800', 0.1), borderRadius: 2, borderLeft: '4px solid #ff9800' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>
                                🛡️ HTML转义
                            </Typography>
                            <Typography variant="body2" color="text.secondary">
                                使用 <code>&lt;#escape x as x?html&gt;</code> 自动转义HTML特殊字符
                            </Typography>
                        </Box>
                    </Stack>
                </AccordionDetails>
            </Accordion>

            <Accordion>
                <AccordionSummary 
                    expandIcon={<ExpandMoreIcon />}
                    sx={{ 
                        bgcolor: alpha('#d32f2f', 0.05),
                        borderRadius: 2,
                        mb: 1,
                        '&:hover': { bgcolor: alpha('#d32f2f', 0.1) }
                    }}
                >
                    <Typography 
                        variant="subtitle1" 
                        sx={{ 
                            fontWeight: 600,
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1
                        }}
                    >
                        <WarningAmberIcon fontSize="small" sx={{ color: '#d32f2f' }} />
                        注意事项
                    </Typography>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 2 }}>
                    <Stack spacing={1}>
                        <Typography variant="body2" color="text.secondary">
                            ⚠️ FTL模板中的变量必须在数据模型中存在，否则会抛出异常
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                            📊 字符串和数字是不同的类型，使用时需注意类型转换
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                            🔍 使用 <code>?default("默认值")</code> 为空值提供默认值
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                            🔧 复杂表达式建议使用括号明确优先级
                        </Typography>
                    </Stack>
                </AccordionDetails>
            </Accordion>
        </Paper>

        <Box sx={{ mt: 3, textAlign: 'center' }}>
            <Paper elevation={0} sx={{ 
                p: 2, 
                bgcolor: alpha('#1976d2', 0.05),
                borderRadius: 2,
                border: `1px solid ${alpha('#1976d2', 0.2)}`
            }}>
                <Typography variant="body2" color="text.secondary">
                    📖 更多详细信息请参考 
                    <Link 
                        href="https://freemarker.apache.org/docs/index.html" 
                        target="_blank" 
                        rel="noopener"
                        sx={{ mx: 1, fontWeight: 600 }}
                    >
                        FreeMarker官方文档
                    </Link>
                </Typography>
            </Paper>
        </Box>
    </Box>
));

export default UsageGuide;